<template>
  <div>
    <h1>购物车综合案例练习</h1>

    <add-cart  @myallDelete="allDelete" @add-my-goods="addMyGoods"></add-cart>
    <cart-list :goodsList="goodsList" @deleteGood="mydelete"  @add-goods-count='addCount'></cart-list>
    
  </div>
</template>



<script>
import CartList from "./cartList";

import addCart from "./addCart";
function getData() {
  return [
    {
      id: 1,
      name: "热玛吉",
      price: 20000,
      flag: false,
    },
    {
      id: 2,
      name: "耗子尾汁",
      price: 1000,
      flag: false,
    },
    {
      id: 3,
      name: "vue",
      price: 2000,
      flag: true,
    },
  ];
}

export default {
  data() {
    return {
      goodsList: [],
    };
  },
  components: {
    "cart-list": CartList,
    "add-cart": addCart,
  },
  created() {
    this.goodsList = getData();
  },
  mounted() {},
  methods: {
    //单个商品添加
    addMyGoods(obj) {
      this.goodsList.push(obj);
      this.name = "";
      this.price = "";
    },

    //单个商品删除
    mydelete(currentItem) {
      this.goodsList = this.goodsList.filter(
        (item) => item.id !== currentItem.id
      );
    },

    //全部删除
    allDelete() {
      let flag = window.confirm("是否要全部删除");
      if (flag) {
        this.goodsList = [];
      }
    },
    //商品数量添加

    addCount(currentItem) {
      if (!currentItem.count) {
        // currentItem.count = 1;  // model 的数据被改了 但是页面上不会实现响应式更新
        // this.$set('target','key','val')
        this.$set(currentItem, "count", 1);
      } else {
        currentItem.count++;
      }
    },
  },
};
</script>

<style scoped   lang='css'>
.tBox {
  margin: 0 auto;
  width: 800px;
}
</style>
